<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link href="css/MI_shopping.css"   rel="stylesheet"  type="text/css" />
		<link href="css/font_u7bx2r3cui8uxr/iconfont.css" rel="stylesheet"  type="text/css" />
	</head>
	<body>
		<div id="header">
			<div id="headermain">
				<div class="logo fl">
					<img src="img/milogo1.png" style="margin-right: 45px;" align="center" /> 我的购物车
					<span style="font-size: 12px;margin-left: 10px;">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
				</div>
				<ul class="rightfr">
					<li>
						<a class="username" href="javascript:">
							懿湘湘
							<i class="iconfont icon-xiala1"></i>
						</a>
						<a href=" Remote control.html"  >个人订单</a>
					</li>
					<ul class="personalul">
						     <li > 个人中心</li>
                              <li> 评价晒单</li>
                             <li> 我的喜欢</li>
                             <li> 小米账户</li>
                             <li> 退出登录</li>  
					</ul>
				</ul>
			</div>
		</div>
     <div style="clear:both;"></div>
		<div class="bg">
			<div id="main">
				<table border="0" cellspacing="0" cellpadding="0" width="1220px" align="center">
					<thead>
						<tr height="40px" bgcolor="#F5F5F5">
							<td colspan="9"></td>
						</tr>
						<tr height="65px" style="font-size: 14px;">
							<td width="70px" align="center" valign="center">
								<i id="quanxuan"></i>
								<span class="fr">全选</span>
							</td>
							<td width="130px"></td>
							<td width="400px" align="left" valign="center">商品名称</td>
							<td width="55px" align="right" valign="center">单价</td>
							<td width="300px" align="center" valign="center" colspan="3">数量</td>
							<td width="55px" align="right" valign="center">小计</td>
							<td align="center" valign="center">操作</td>
						</tr>
					</thead>
					<tbody id="tbody1">
						<tr>
							<td colspan="9">
								<hr />
							</td>
						</tr>
						<tr height="115px" valign="center">
							<td class="jianju">
								<i></i>
							</td>
							<td align="center">
								<img src="img/购物车/pms_1482321199.12589253!80x80.jpg" />
							</td>
							<td align="left">
								<a href="javascript:;">耳机</a>
							</td>
							<td>
								<span>25</span>元
							</td>
							<td align="right" width="115px">
								<input type="button" name="" id="inputbtn1" value="-" />
							</td>
							<td width="70px">
								<input type="text" name="" id="inputtxt" value="1" />
							</td>
							<td width="115px" align="left">
								<input type="button" name="" id="inputbtn2" value="+" />
							</td>

							<td id="td_xiaoji">
								<span class="qian">25</span>元
							</td>
							<td align="center">
								<input type="button" name="" id="del" value="x" class="shan" />
							</td>
						</tr>
						<tr>
							<td colspan="9">
								<hr />
							</td>
						</tr>
						<tr height="115px" valign="center">
							<td class="jianju"><i></i></td>
							<td align="center"><img src="img/购物车/pms_1490702347.3628109!80x80.png" /></td>
							<td align="left">
								<a href="javascript:">小米机械键盘 白色</a>
							</td>
							<td>
								<span>299</span>元</td>
							<!--[3]-->
							<td align="right" width="115px">
								<!--4-->
								<input type="button" id="inputbtn1" value="-" />
								<!--4-0-->
							</td>
							<td width="70px">
								<input type="text" id="inputtxt" value="1" />
								<!--5-0-->
							</td>
							<td width="115px" align="left">
								<input type="button" id="inputbtn2" value="+" />
								<!--6-0-->
							</td>
							<td id="td_xiaoji">
								<span class="qian">299</span>元
							</td>
							<td align="center"><input type="button" id="del" value="x" class="shan" /></td>
						</tr>
						<tr>
							<td colspan="9">
								<hr />
							</td>
						</tr>
						<tr height="115px" valign="center">
							<td class="jianju">
								<i></i></td>
							<td align="center">
								<img src="img/购物车/pms_1469523170.25518983!80x80.jpg" />
							</td>
							<td align="left">
								<a href="javascript:;">小米自拍杆（线控版）白色</a>
							</td>
							<td>
								<span>49</span>元</td>
							<td align="right" width="115px">
								<input type="button" name="" id="inputbtn1" value="-" class="botton" />
							</td>
							<td width="70px">
								<input type="text" name="" id="inputtxt" value="1" />
							</td>
							<td width="115px" align="left">
								<input type="button" name="" id="inputbtn2" value="+" class="botton" />
							</td>
							<td id="td_xiaoji">
								<span class="qian">49</span>元
							</td>
							<td align="center">
								<input type="button" id="del" value="x" class="shan" />
							</td>
						</tr>

					</tbody>
				</table>
			</div>
			<div id="jiesuan">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr height="50px">
						<td width="120px">
							<a href="javascript:;">继续购物</a>
						</td>
						<td width="615px" align="left">
							<span>共 <a id="num">3</a>件商品，已选择 
								<a id="xuannum">0</a>件</span>
						</td>
						<td width="285px" align="left" class="lastprice">
							<span>合计（不含运费）：
								<a id="sum">0.00</a>元 </span>
						</td>
						<td>
							<input type="button" id="button1" value="去结算" class="qu" />
						</td>
					</tr>
				</table>
			</div>
       
			<div style="clear: both;"></div>
			<div id="advice">
				<h2 class="xm-recommend-title">
						<span>买购物车中商品的人还买了</span>
					</h2>
			</div>
			<div style="clear: both;"></div>
		 </div>
       <div id="tuijianlist">
					<ul class="luntuilist ">
						<!--<1>-->
						<li >
							<img src="img/小米笔记本/手环2.jpg "  />
							<p>小米笔记本贴纸 13.3英寸 梵高星空</p>
							<p><span>64.9元</span></p>
							<dd class="tips ">1.1万人好评</dd>
						</li>

						<li >
							<img src="img/小米笔记本/无人机.jpg"  />
							<p>小米无人机4K版套装</p>
							<p><span>2969元</span></p>
							<dd class="tips">476人好评</dd>
						</li>

						<li >
							<img src="img/小米笔记本/机器人.jpg "  />
							<p>米家扫地机器人</p>
							<p><span>1699元</span></p>
							<dd class="tips ">1.1万人好评</dd>
						</li>

						<li>
							<img src="img/小米笔记本/运动鞋.jpg"   />
							<p>米家运动鞋(智能版) 男款</p>
							<p><span>249元</span></p>
							<dd class="tips">1.3万人好评</dd>
						</li>

						<li >
							<img src="img/小米笔记本/手环2.jpg "  />
							<p>小米笔记本贴纸 13.3英寸 梵高星空</p>
							<p><span>64.9元</span></p>
							<dd class="tips ">1.1万人好评</dd>
						</li>
					</ul>
				</div>

          <div style="clear: both;height: 50px;width: 100%;"></div>
            
		<div id="footer">
			<div class="footer_1">
				<ul>
					<li class="li1">
						<a href="javascript:;">预约维修服务</a>
					</li>
					<li class="li2">
						<a href="javascript:;">7天无理由退货</a>
					</li>
					<li class="li3">
						<a href="javascript:;">15天免费换货</a>
					</li>
					<li class="li4">
						<a href="javascript:;">满150元包邮</a>
					</li>
					<li class="li5">
						<a href="javascript:;">520余家售后网点</a>
					</li>
				</ul>
			</div>
			<div class="footer_2">
				<dl>
					<dt><a href="javascript:;">帮助中心</a></dt>
					<dd>
						<a href="javascript:;">账户管理</a>
					</dd>
					<dd>
						<a href="javascript:;">购物指南</a>
					</dd>
					<dd>
						<a href="javascript:;">订单操作</a>
					</dd>
				</dl>
				<dl>

					<dt><a href="javascript:;">服务支持</a></dt>
					<dd>
						<a href="javascript:;">售后政策</a>
					</dd>
					<dd>
						<a href="javascript:;">自助服务</a>
					</dd>
					<dd>
						<a href="javascript:;">相关下载</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">线下门店</a></dt>
					<dd>
						<a href="javascript:;">小米之家</a>
					</dd>
					<dd>
						<a href="javascript:;">服务网点</a>
					</dd>
					<dd>
						<a href="javascript:;">零售网点</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">关于小米</a></dt>
					<dd>
						<a href="javascript:;">了解小米</a>
					</dd>
					<dd>
						<a href="javascript:;">加入小米</a>
					</dd>
					<dd>
						<a href="javascript:;">联系我们</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">关注我们</a></dt>
					<dd>
						<a href="javascript:;">新浪微博</a>
					</dd>
					<dd>
						<a href="javascript:;">小米部落</a>
					</dd>
					<dd>
						<a href="javascript:;">官方微博</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="javascript:;">特色服务</a></dt>
					<dd>
						<a href="javascript:;">F码通道</a>
					</dd>
					<dd>
						<a href="javascript:;">礼物码</a>
					</dd>
					<dd>
						<a href="javascript:;">防伪查询</a>
					</dd>
				</dl>
				<div class="phone fr">
					<p class="number">400-100-5678</p>
					<p>周一至周日 8:00-18:00</p>
					<p>（仅收市话费）</p>
					<p class="hourpic"></p>
				</div>
			</div>
		</div>
					<div style="clear: both;"></div>
		<div class="backg">
			<div class="footer_3 ">
				<div class="fl">
					<img src="img/logo-footer.png" align="center" /></div>
				<div class="fl footer_4">
					<ul>
						<li>
							<a href="javascript:;">小米商城</a>|</li>
						<li>
							<a href="javascript:;">MIUI</a>|</li>
						<li>
							<a href="javascript:;">米聊</a>|</li>
						<li>
							<a href="javascript:;">多看书城</a>|</li>
						<li>
							<a href="javascript:;">小米路由器</a>|</li>
						<li>
							<a href="javascript:;">视频电话</a>|</li>
						<li>
							<a href="javascript:;">小米淘宝直营店</a>|</li>
						<li>
							<a href="javascript:;">小米网盟</a>|</li>
						<li>
							<a href="javascript:;">小米移动</a>|</li>
						<li>
							<a href="javascript:;">隐私政策</a>|</li>
						<li>
							<a href="javascript:;">Select Region</a>|</li>
					</ul>
					<div style="clear: both;"></div>
					<p>
						<a href="javascript:;">&copy;mi.com</a>
						<a href="javascript:;">京ICP证110507号</a>
						<a href="javascript:;">京ICP备10046444号</a>
						<a href="javascript:;">京公网安备11010802020134号</a>
						<a href="javascript:;">京网文[2014]0059-0009号</a>
					</p>
					<p>违法和不良举报信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验测试</p>
				</div>
				<div class="fr">
					<img src="img/footer/truste.png" width="85px" />
					<img src="img/footer/v-logo-2.png" />
					<img src="img/footer/v-logo-1.png" />
					<img src="img/footer/v-logo-3.png" />
				</div>
				<div style=" clear: both;"></div>
			</div>
			<footer>探索小米黑科技，为小米发烧而生</footer>

		</div>
		
		     <!-- 弹出框设置 -->
		     <div id="mubu">
              <div  id="Ding">
                 <div id="promtbox">
         <input type="button" name="" class="close" value="x">
           <p>确定删除吗</p>
           <input type="button" name="" value="取消" class="no">
           <input type="button" name="" value="确定"  class="yes">
		</div>
              </div>
              </div>
		
    <!-- 弹出框设置结束 -->
		
		
		
		<script type="text/javascript">
			

			
			//			页面加载完成时候执行
			window.onload = function() {
				AddEvent(tbody1, 'click', 'button');
				var hang;
			}
			
		    //			一定要在document下提取元素,不可省略
            var xuannum = document.getElementById("xuannum");
			var you = 0;
			var qu = document.getElementById("button1");
			var quanxuan = document.getElementById("quanxuan");
			var is = document.getElementById("tbody1").getElementsByTagName("i");
			var classname = document.getElementById("tbody1").getElementsByClassName("active");
			
		    //         全选事件
		    	for(var a = 0; a < is.length; a++) {
				is[a].onclick = function() {
					if(this.className == "active") {
						this.removeAttribute("class");
						you--;
						xuannum.innerHTML = you;
					} else {
						this.className = "active";
						you++
						xuannum.innerHTML = you;

					}
					if(classname.length == is.length) {
						quanxuan.className = "active";
					} else if(classname.length == 0) {
						quanxuan.removeAttribute("class");
					} 
					sum();
				}
			}
	        		quanxuan.onclick = function() {
				if(quanxuan.className == "active") {
					quanxuan.removeAttribute("class");
					you = 0;
					xuannum.innerHTML = you;
				} else {
					quanxuan.className = "active";
					you = 3;
					xuannum.innerHTML = you;
				}
				for(var a = 0; a < is.length; a++) {
					is[a].className = quanxuan.className;
				}

				sum();
			}
		   //         删除商品页面
			function shan(t) {
				var mubu = document.getElementById("mubu");
				mubu.style.display = "block";
				hang = t;
			}
			  //弹出按钮的点击事件
				var oYes= document.querySelector(".yes");
				var oNo= document.querySelector(".no");				
                oYes.onclick=function(){
                	hang.parentNode.parentNode.remove();
                	mubu.style.display = "none";
				sum();
				trsum();
                }
		
                oNo.onclick=function(){
                	mubu.style.display = "none";
				sum();
				trsum();
                }
			//		计算总价钱
		    	function sum() {
				var sum = 0.00;
				var aa = document.getElementById("sum");
				for(var z = 0; z < classname.length; z++) {
					sum += parseFloat(classname[z].parentNode.parentNode.children[7].children[0].innerHTML);
				}
				aa.innerHTML = sum;
				if(aa.innerHTML != 0) {
					qu.className = "qu";
					qu.removeAttribute("id");
				} else {
					qu.removeAttribute("class");
					qu.id = "button1";
				}
			}
			function trsum() {
				var num = document.getElementById('num');
				var trsum = document.getElementById("tbody1").getElementsByTagName("tr");
				num.innerHTML = trsum.length;
			}
            // 总计  主要的		
            function AddEvent(obj, name, type) {
				obj.addEventListener(name, function(event) {
					var btn = event.target;
					if(btn.type == type) {
						var text = btn.parentNode.parentNode.children[5].children[0];
						var dan = btn.parentNode.parentNode.children[3].children[0].innerHTML;
						var xiaoji = btn.parentNode.parentNode.children[7].children[0];
						switch(btn.value) {
							case "-":
								text.value = text.value == 1 ? 1 : parseInt(text.value) - 1;
								xiaoji.innerHTML = parseFloat(dan * text.value);
								sum();
								break;
							case "+":
								text.value = parseInt(text.value) + 1;
								xiaoji.innerHTML = parseFloat(dan * text.value);
								sum();
								break;
							case "x":
								shan(btn);
								break;
						}
					}

				})
			}
		</script>
	</body>

</html>